<template>
    <div class="payment">
        <Sidebar />
        <n-flex vertical class="main">
            <!-- <n-flex vertical class="user_info">
                <div class="title size1">
                    <img src="/img/payment/backBtn.webp" class="back_button" @click="router.push('/')" />
                    <span>{{ t('wallet_page_home') }}>{{ t(menuName) }}</span>
                </div>
            </n-flex> -->
            <div class="head">
                <img src="/img/home/back.webp" alt="" @click="router.go(-1)">
                <span>{{ t('wallet_page_home') }}>{{ t(menuName) }}</span>
            </div>
            <router-view></router-view>
        </n-flex>
    </div>
</template>

<script setup lang='ts'>
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';
import Sidebar from '@/views/wallet/Sidebar.vue'
const page = Page(pinia);
const { menuName } = storeToRefs(page);
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router';
const { t } = useI18n()
const router = useRouter()


</script>

<style lang='less' scoped>
.payment {
    display: flex;
    flex: 1;
}

.main {
    width: 1200px;
    padding-top: 14px;
    margin-left: 90px;
    color: #fff;

    >.head {
        height: 45px;
        line-height: 45px;
        position: relative;
        text-align: center;
        color: #fff;
        border-radius: 12px;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.39), 0 2px 2px 0 rgba(0, 0, 0, 0.34), 0 5px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 3px 0 rgba(0, 0, 0, 0.06), 0 13px 3px 0 rgba(0, 0, 0, 0.01);
        background-image: radial-gradient(#4c36b3 0%, #3a2786 5%, #3c279a 7%);
        margin-bottom: 30px;
        font-size: 20px;

        >img {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 7px;
            left: 8px;
            cursor: pointer;
        }
    }
}

.title {
    display: flex;
    align-items: center;
    gap: 7.4px;
    padding-top: 19px;
    padding-bottom: 12px;

}

.size1 {
    font-size: 20px;
}

.back_button {
    cursor: pointer;
    width: 19.2px;
    height: 19.2px;
}
</style>
